<template>
  <div style="height: 500px;width: 2000px;">
    <el-table-v2 :columns="props.prop_keys" :data="props.prop_list" :width="2000" :height="500" fixed />
  </div>
</template>

<script lang="ts" setup>
let props = defineProps({
  prop_list:{
    type: Array,
    default: () => []
  },
  prop_keys: {
    type: Array,
    default: () => []
  },
  aaa: {
    type: Number,
    default: 0
  }
})

// console.log( 'props.prop_keys', props.prop_keys );
// console.log( 'props.prop_list', props.prop_list );


const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }))

const generateData = (
  columns: ReturnType<typeof generateColumns>,
  length = 200,
  prefix = 'row-'
) =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
        return rowData
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null,
      }
    )
  })

// const columns = generateColumns(10)
// const data = generateData(columns, 200)
// console.log( data , 111111111, columns)

</script>
